<template>
  <div>
    <div>
      <el-input
        class="edge"
        style="width:180px"
        size="mini"
        placeholder="注单编号,账号"
        prefix-icon="el-icon-search"
        v-model="keyword"
      ></el-input>

      <!-- 彩种 -->

      <el-select
        class="edge"
        style="width:180px"
        clearable
        size="mini"
        v-model="choose"
        placeholder="彩种"
      >
        <el-option v-for="item in module" :key="item.value" :label="item.value" :value="item.code"></el-option>
      </el-select>

      <!-- 股东 -->
      <el-select size="mini" v-model="chooses" placeholder="请选择">
        <el-option
          @click.native="cracks(item.code)"
          v-for="item in shareholders"
          :key="item.value"
          :label="item.value"
          :value="item.code"
        ></el-option>
      </el-select>
      <!-- 确定 -->
      <el-button style="margin-left:10px" size="mini" type="primary">确认</el-button>
      <el-button style="margin-left:10px" size="mini">重置</el-button>
    </div>

    <!-- 列表 -->
    <el-table border size="mini" :data="tableData" style="width: 100%;margin-left:20px" :header-cell-style="{background:'#ccc'}">
      <el-table-column prop="date" label="状态" width="100px"></el-table-column>
      <el-table-column prop="name" label="彩种"  width="100px"></el-table-column>
      <el-table-column prop="address" label="股东"  width="100px"></el-table-column>
      <el-table-column prop="address" label="备份日期"  width="130px"></el-table-column>
      <el-table-column prop="address" label="期数"  width="130px"></el-table-column>
      <el-table-column prop="address" label="备份开始时间"></el-table-column>
      <el-table-column prop="address" label="备份完成时间"></el-table-column>
      <el-table-column prop="operation" label="操作">
        <template>
          <el-button size="mini" type="primary">详情</el-button>
          <el-button size="mini" type="primary">重新备份</el-button>
          <el-button size="mini" type="primary">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div>
         <el-pagination
            style="display: inline-block;
             float: right;margin-top:20px"
             
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="100"
            layout="prev, pager, next"
            :total="1000"
          ></el-pagination>
    </div>
  </div>
</template>
<script>
import { getList } from "@/api/table";
import { Module } from "@/api/user";
import qs from "qs";
export default {
  data() {
    return {
        currentPage:1,
      keyword: "",
      choose: "",
      module: [],
      choose: "",
      chooses: "股东",
      shareholders: [
        { code: "1", value: "股东" },
        { code: "2", value: "总代理" },
        { code: "3", value: "代理" }
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ]
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
       handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 选择股东 代理
    cracks(type) {
      let that = this;
      this.cracksApp = type;
      console.log(this.cracksApp, 123456);
    },
    //彩种接口
    fetchData() {
      let data = qs.stringify({});
      Module(data).then(res => {
        console.log(res.data, 888);
        if (res.data.code == 200) {
          this.module = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.edge {
  margin: 20px 20px 20px 20px !important;
}
</style>